<template>
    <div class="bigbox">
        <!-- 导航栏 -->
        <div class="nav">
            <div  style="margin-left: 163px;">
                <ul v-if="userTel==null" class="navul">
                    <li @click="Gohompage">
                        <van-icon name="wap-home" color="#FF4400" />闲呗首页
                    </li>
                    <li><a class="mylogingo" @click="goLogin">登录</a>&nbsp;/&nbsp;<a @click="gozce">注册</a></li>
                    <li>退出</li>
                </ul>
                <ul v-else class="navul">
                    <li @click="Gohompage">
                        <van-icon name="wap-home" color="#FF4400" />闲呗首页
                    </li>
                    <li>欢迎你：{{this.userTel}}</li>
                    <li @click="tuichu">退出</li>
                </ul>
            </div>
            <div style="float: right;">
                <ul class="navultow">
                    <li @click="gomycenter" class="mycb1"><a class="myxb">我的闲呗</a>
                        <div class="hen"></div>
                        <ul class="second">
                            <li><a class="second1">我已买到的宝贝</a></li>
                            <li class="second1">我已卖出的宝贝</li>
                        </ul>
                    </li>
                    <!-- <li>
                        <van-icon name="shopping-cart-o" color="#FF4400" />购物车<div class="hen"></div>
                    </li> -->
                    <li>
                        <van-icon name="star" color="#FF4400" />收藏夹<div class="hen"></div>
                    </li>
                    <!-- <li>
                        手机版<div class="hen"></div>
                    </li> -->
                    <li @click="gocustomerchat()" >联系客服<div class="hen"></div>
                    </li>
                    <li>商家中心</li>

                </ul>
            </div>
        </div>

        <!-- 搜索区 -->
        <!-- logo搜索区 -->
        <div class="headlogo">
            <div class="headinner">
                <div class="titlebox">
                    <div><img src="http://112.74.185.144:8000/files/Zqm1666747516.jpg" ></div>
                    <div class="miaosu"><i class="el-icon-circle-check"></i>100%正品</div>
                    <div class="miaosu"><i class="el-icon-circle-check"></i>退换无忧</div>
                    <div class="miaosu"><i class="el-icon-circle-check"></i>安全可靠</div>
                    <div class="miaosu2">
                        <input type="text" name="" class="miaosutext input1">
                        <button class="miaosubutton input1"><i class="el-icon-search"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="hdongguiz">
            <div class="huodongtu">
                <div class="titleimg">
                    <img src="	https://gjusp.alicdn.com/img/img1609402886041-996.jpg@1000y-0ic_60Q.jpg_Q75.jpg" alt="">
                </div>
            </div>
            <!-- 分类按钮 -->
            <div class="fenleibtnbox">
                <div><el-button @click="selecthuodongshopp()" type="danger" round>全部</el-button></div>
                <div><el-button @click="selecthuodongshopp(1)" type="danger" round>电器</el-button></div>
                <div><el-button @click="selecthuodongshopp(2)" type="danger" round>数码产品</el-button></div>
                <div><el-button @click="selecthuodongshopp(3)" type="danger" round>服饰</el-button></div>
                <div><el-button @click="selecthuodongshopp(4)" type="danger" round>奢侈品</el-button></div>
                <div><el-button @click="selecthuodongshopp(5)" type="danger" round>车类</el-button></div>
                <div><el-button @click="selecthuodongshopp(6)" type="danger" round>家装</el-button></div>
                <div><el-button @click="selecthuodongshopp(7)" type="danger" round>玩具</el-button></div>
                <div><el-button @click="selecthuodongshopp(8)" type="danger" round>房产</el-button></div>
                <div><el-button @click="selecthuodongshopp(9)" type="danger" round>运动户外</el-button></div>
                <div><el-button @click="selecthuodongshopp(10)" type="danger" round>宠物</el-button></div>
                <div><el-button @click="selecthuodongshopp(11)" type="danger" round>游戏</el-button></div>
                <div><el-button @click="selecthuodongshopp(12)" type="danger" round>图书</el-button></div>
                <div><el-button @click="selecthuodongshopp(13)" type="danger" round>建材</el-button></div>
                <div><el-button @click="selecthuodongshopp(14)" type="danger" round>百货</el-button></div>
            </div>
            <!-- 烟花区域 -->
            <div class="yanhuaqu">
                <div><img src="https://gw.alicdn.com/tfs/TB1X6f7dTtYBeNjy1XdXXXXyVXa-120-48.png_140x10000.jpg" alt=""></div>
                <div>闲呗好物</div>
                <div><img src="https://gw.alicdn.com/tfs/TB1X6f7dTtYBeNjy1XdXXXXyVXa-120-48.png_140x10000.jpg" alt=""></div>
            </div>
            <!-- 商品展示 -->
            <div class="allshoppbox">
                <!-- 数据库拿到的商品循环渲染 -->
                <div class="shopinfo" v-for="(item,index) in activityshopp" :key="index">
                    <div><img :src="item.commodityImg" alt=""></div>
                    <div class="inforightbox">  
                        <div class="shoppname">{{item.commodityName}}</div>
                        <div class="shoppwhite"> </div>
                        <div class="allpricebox"> 
                            <span class="huoodngjia">活动价</span>
                            <span>￥</span>
                            <span>{{item.currentPrice}}</span>
                            <span>￥ {{item.originalPrice}}</span>
                        </div>
                        <button @click="gobuyshopp(item)">立即购买</button>
                    </div>
                </div>
                     <!-- 右侧固定定位导航 -->
                    <div id="tool">
                        <span class="inonfont"></span>
                        <div class="btn">
                            <a class="c4 active">爱逛 好货</a>
                            <a href="javaScript:0" class="c5" @click="gohuodong">活动 报名</a>
                            <a href="javaScript:0" class="c7" @click="gohongpage" >回到 首页</a>
                            <a href="javaScript:0" class="c4">猜你 喜欢</a>
                            <a href="javascript:window.scrollTo(0,0)"  class="c4">顶部</a>
                        </div>
                    </div>

        <!-- //分页 -->
        <div class="fneyebox" v-if="activityshopp.length>0">
            <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :page-size="pagesize"
            :total="alltotal">    
            </el-pagination>
        </div>
        <div class="noshoppbox" v-else>
            <el-empty description="暂时还没有商品哦~"></el-empty>
        </div>
            </div>
        </div>
        <div class="endxx">
      <div class="endwz">
        <ul>
          <li>购物指南</li>
          <li>免费注册</li>
          <li>开通支付宝</li>
          <li>支付宝充值</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>闲呗保障</li>
          <li>发票保障</li>
          <li>售后规则</li>
          <li>物流时效保障</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>支付方式</li>
          <li>快捷支付</li>
          <li>信用卡</li>
          <li>余额宝</li>
          <li>蚂蚁花呗</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>商家服务</li>
          <li>闲呗规则</li>
          <li>商家入驻</li>
          <li>商家中心</li>
          <li>闲呗必修课</li>
          <li>喵言喵语</li>
          <li>平台服务协议</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>手机闲呗</li>
          <li><img src="../assets/ewm.png" style="width: 90px" /></li>
        </ul>
      </div>
    </div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                userTel:sessionStorage.getItem('userTel'),
                usertel:'',
                alltotal:0,//总条数
                pagesize:8,//一页大小
                nowpage:1,//当前页
                activityshopp:[],
            }
        },
        methods:{
            Gohompage(){
                this.$router.push({name:'HomePage'})
            },
                  //到个人中心
                gomycenter(){
                    if(sessionStorage.getItem('userTel')==null){
                        this.$router.push({
                            name:'Login'
                        })
                    }else{
                        this.$router.push({
                            name:'MyCenter'
                        })
                    }
                },
            //退出登录的方法
         tuichu(){
            sessionStorage.removeItem('userTel')
            this.$router.go(0)
         },
            gozce(){
            this.$router.push({name:'Register'})
         },
                //前往登录
                goLogin(){
                this.$router.push({name:'Login'})
            },
            //回到首页.
            gohongpage(){
                this.$router.push({name:'HomePage'})
            },
            gocustomerchat(){  //去客服聊天
            if (sessionStorage.getItem('userTel')) {
                this.$router.push({name: 'CustomerChat'})
            }
         },

            //去到活动报名页面
            gohuodong(){
                this.$router.push({name:'HuodongPage'})
            },
            //分页按钮的第几页
            handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.nowpage = val
                    this.selecthuodongshopp()
                },
            //查询活动商品
            selecthuodongshopp(index){
                this.$axios({
                    url:'/api/selectHuodshoppcommodityTable/get',
                    method:'get',
                    params:{
                        start:(this.nowpage-1)*this.pagesize,
                        size:this.pagesize,
                        typeid :index
                    },
                })
                .then(resp=>{
                    console.log(resp.data)
                    this.alltotal = resp.data.num
                    this.activityshopp = resp.data.data
                })
                .catch(err=>{
                    console.log(err.data)
                })
            },
            gobuyshopp(item){
                console.log(item,266);
                localStorage.setItem("hx220408commodityId",item.commodityId)
                localStorage.setItem("hx220408userTel",item.userTel)
                this.$router.push({name:'goods'})
            },
        },
        mounted(){
            this.selecthuodongshopp()
        },
        created(){
            document.title='活动中心'
        }
    }
</script>

<style scoped>
    .hdongguiz{
        /* background: linear-gradient(to right, rgb(138, 35, 135), rgb(233, 64, 87), rgb(242, 113, 33)); */
        background: linear-gradient(to right, rgb(255, 0, 153), rgb(73, 50, 64));
        width: 100vw;
        height: 1000px;
    }
    .titleimg img{
        width: 99%;
        height: 120px;
    }
    .yanhuaqu{
        display: flex;
        width: 990px;
        height: 49px;
        margin: 0 auto;
        justify-content: center;
    }
    .yanhuaqu div:nth-child(2){
        font-size: 34px;
        color: white;
    }
    .yanhuaqu div:nth-child(3){
        margin-left: -50px;
    }
    .allshoppbox{
        height: 200px;
        width: 1041px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    .shopinfo{
        background-color: rgb(255, 255, 255);
        width: 490px;
        height: 168px;
        border-radius: 12px;
        display: flex;
        margin: 5px 13px;
    }
    .inforightbox{
        width: 100%;
        color: white;
    }
    .inforightbox button{
        width: 93%;
        margin-left: 12px;
        background-color: rgb(254, 40, 58);
        border: none;
        height: 30px;
        border-radius: 4px;
    }
    .shoppname{
        margin-left: 13px;
        margin-top: 13px;
        max-width: 296px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgb(51, 51, 51);
        font-size: 18px;
        font-weight: 400;
    }
    .shoppwhite{
        height: 28px;
    }
    .allpricebox{
        display: flex;
        margin: 20px 17px;
    }
    .huoodngjia{
        padding-left: 6px;
        padding-right: 6px;
        border-radius: 4px;
        font-size: 14px;
        color: rgb(255, 255, 255);
        background-color: rgb(255, 0, 54);
    }
    .allpricebox span:nth-child(2){
        margin-top: 4px;
        margin-left: 2px;
        line-height: 14px;
        white-space: nowrap;
        color: rgb(255, 0, 54);
        font-size: 13px;
        font-weight: 500;
    }
    .allpricebox span:nth-child(3){
        margin-top: 1px;
        margin-left: 1px;
        line-height: 17px;
        white-space: nowrap;
        color: rgb(255, 0, 54);
        font-size: 20px;
        font-weight: 500;
    }
    .allpricebox span:nth-child(4){
        margin-top: 3px;
        margin-left: 31px;
        max-width: 124px;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 14px;
        white-space: nowrap;
        color: rgb(153, 153, 153);
        font-size: 14px;
        font-weight: 400;
        text-decoration: line-through;
    }
    .shopinfo img{
        width: 168px;
        height: 168px;
        border-radius: 12px 0px 0px 12px;
    }
    .fneyebox{
        text-align: center;
        /* border: 1px solid yellow; */
        width: 1000px;
        margin: 0 auto;
    }
     .noshoppbox
    {
        text-align: center;
        width: 1000px;
        margin: 0 auto;
    }
    /* 右侧固定导航栏 */
    /* 右边导航栏 */
#tool{
	width: 50px;
	height: 400px;
	position: fixed;
	top: 200px;
	right: 10px;
}

#tool span{
	font-size: 32px;
	color: yellowgreen;
	width: 50px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	position: absolute;
	top: -28px;
	right: 0;
}
.btn a{
    color: black;
}
#tool div{
	height: 400px;
	border-radius: 8px;
	overflow: hidden;
}


#tool a{
	display: block;
	width: 50px;
	height: 50px;
	text-align: center;
	background: #fff;
	word-break: keep-all;
	padding-top: 6px;
	box-sizing: border-box;
	position: relative;

}
#tool a:after{
	content: '';
	border-bottom: 1px solid #efefef;
	width: 34px;
	position: absolute;
	left: 8px;
	bottom: 0;
}

#tool a.item7{
	line-height: 40px;
}

#tool a:hover, #tool a.active{
	background-image: linear-gradient(135deg,yellowgreen,yellow);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff6f06', GradientType=1);
	color: #fff;
	font-weight: bold;
}
#tool a:hover:after, #tool a.active:after{
	border: none;
}

/* 分类盒子 */
.fenleibtnbox{
    /* border: 1px solid red; */
    height: 40px;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 10px;
}
.endxx {
  width: 1210px;
  height: 144px;
  margin: 0 auto;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
}
.endwz li:nth-child(1) {
  font-size: 16px;
  font-weight: 700;
}
.el-step__title {
  width: 200px !important;
}
.abc {
  width: 600px;
}
.textRed {
  background-image: url(../assets/TB1OVRCRpXXXXaMXFXXXXXXXXXX-237-106.png);
}
.text1{
  display: inline-block;
    width: 131px;
    position: relative;
    margin-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    top: -39px;
    left: -4px;
}
</style>